<h1>
  Application <strong>{{app.name}}</strong>&nbsp;
  <span class="{{app.labelTypeClass()}}">{{app.type}}</span>
  <span *ngIf="defaultApp" class="label">{{defaultApp.version}}</span>
</h1>

<div *ngIf="!loading">
  <div class="datagrid-action-bar" [appRole]="['ROLE_DESTROY']">
    <button id="btnUnregister" type="button" class="btn btn-sm btn-secondary" (click)="unregister()">
      Unregister Application
    </button>
    <button id="btnVersion" type="button" class="btn btn-sm btn-secondary" (click)="manageVersions()"
            *ngIf="versions?.length > 1">
      Manage versions
    </button>
  </div>

  <div class="title-select" *ngIf="detailedApp && versions?.length > 1">
    Version
    <clr-dropdown>
      <button class="btn btn-sm btn-secondary" clrDropdownTrigger>
        {{detailedApp.version}}&nbsp;
        <span *ngIf="detailedApp.defaultVersion">(DEFAULT)</span>
        <clr-icon shape="caret down"></clr-icon>
      </button>
      <clr-dropdown-menu *clrIfOpen>
        <button [class.active]="version.version === detailedApp.version" *ngFor="let version of versions"
                clrDropdownItem (click)="getProperties(version)">
          {{version.version}}&nbsp;
          <span *ngIf="version.defaultVersion">(DEFAULT)</span>
        </button>
      </clr-dropdown-menu>
    </clr-dropdown>
  </div>

  <div class="clr-row">
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Information" name="{{app.name}}.{{app.type}}" keyContext="app" id="info">
        <ng-template>
          <div *ngIf="!loadingProperties">
            <div class="block card-block-keyvalue">
              <div *ngIf="detailedApp.uri" class="row">
                <div class="key">Uri</div>
                <div class="value">{{detailedApp.uri}}</div>
              </div>
              <div class="row">
                <div class="key">Metadata Uri</div>
                <div class="value">{{detailedApp.metaDataUri || 'N/A'}}</div>
              </div>
              <div class="row" *ngIf="versions">
                <div class="key">Version(s)</div>
                <div class="value">{{versions.length}}</div>
              </div>
            </div>
          </div>
          <div *ngIf="loadingProperties">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading information...
          </div>
        </ng-template>
      </app-view-card>
    </div>
  </div>

  <div>
    <div class="clr-row">
      <div class="clr-col-lg-12 clr-col-md-12 clr-col-12">
        <app-view-card titleModal="Application properties" name="{{app.name}}.{{app.type}}" keyContext="app" id="props">
          <ng-template>
            <div *ngIf="!loadingProperties">
              <div class="block card-block-keyvalue lg-key" *ngIf="detailedApp.options?.length > 0">
                <div class="row" *ngFor="let property of detailedApp.options | orderby:'name':'ASC'">
                  <div class="key">
                    {{property.name}}
                    <div *ngIf="property.isDeprecated">
                      <span class="label label-warning">Deprecation level: {{property.deprecation.level}}</span>
                    </div>
                  </div>
                  <div class="value">
                    <div>{{property.description ? property.description : '(No Description Available)'}}</div>
                    <div class="type-block"><code>{{property.type}}</code>&nbsp;<span
                      *ngIf="property.defaultValue">(Default value: <code>{{property.defaultValue}}</code>)</span></div>
                  </div>
                </div>
              </div>
              <div *ngIf="!(detailedApp.options?.length > 0)">
                No property
              </div>
            </div>
            <div *ngIf="loadingProperties">
              <clr-spinner clrInline clrSmall></clr-spinner>
              Loading properties...
            </div>
          </ng-template>
        </app-view-card>
      </div>
    </div>

  </div>
</div>

<div *ngIf="loading" style="padding:1rem 0;">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading application...
</div>

<app-unregister #unregisterModal (onUnregistered)="back()"></app-unregister>
<app-version #versionModal (onChange)="getVersions()"></app-version>
